<template>
  <q-dialog
    ref="dialog"
    :model-value="modelValue"
    @update:model-value="(val) => emit('update:modelValue', val)"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <div class="column dialog q-pa-md">
      <div class="title text-center">Change your birthday</div>
      <div class="sub-title text-center q-mb-md">
        Enter a new birthday and your existing password.
      </div>
      <q-form ref="form" class="q-gutter-y-md" @submit="validate">
        <q-input
          standout
          outlined
          bg-color="black"
          color="accent"
          label="Birthday"
          v-model="birthday"
          hint="Format: Year/Month/Day"
          mask="date"
          :rules="['date', ruleHelpers.required]"
        >
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy
                ref="qDateProxy"
                transition-show="scale"
                transition-hide="scale"
              >
                <q-date v-model="birthday" minimal>
                  <div class="row items-center justify-end">
                    <q-btn v-close-popup label="Close" color="accent" flat />
                  </div>
                </q-date>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <q-input
          standout
          outlined
          color="accent"
          bg-color="black"
          v-model="confirmPassword"
          label="Current Password"
          :rules="[ruleHelpers.required]"
        />
        <q-separator dark />
        <div class="row">
          <q-space />
          <q-btn flat v-close-popup>Cancel</q-btn>
          <q-btn rounded color="accent" type="submit">Done</q-btn>
        </div>
      </q-form>
    </div>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ruleHelpers } from 'src/utils/validationRules';
import { useQuasar, QForm, QDialog } from 'quasar';
import Moment from 'moment';
import { useUserStore } from 'stores/user-store';
const userStore = useUserStore();
const $q = useQuasar();
const form = ref<QForm>();
const dialog = ref<QDialog>();
defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
const birthday = ref('');
const confirmPassword = ref('');
async function validate() {
  const isSuccess = await form.value!.validate();
  if (isSuccess) {
    await submit();
  } else {
    dialog.value!.shake();
  }
}
async function submit() {
  const timestamp = parseInt(Moment(birthday.value, 'YYYY/MM/DD').format('x'));
  await userStore
    .setUserInfo({
      password: confirmPassword.value,
      birthday: timestamp,
    })
    .catch((error) => {
      $q.dialog({
        title: 'Error',
        message: error.message,
      });
      return;
    });
  emit('update:modelValue', false);
}
</script>
<style lang="sass" scoped>

.dialog
  width: 386px
  background-image: linear-gradient(to bottom right, #2a2a2a, #1e1e1e)
  .title
    font-size: 16px
  .sub-title
    font-size: 14px
    color: $sub
</style>
